<template>
	<view>
		<!-- 自定义导航栏 -->
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">组件</block>
		</cu-custom>
		<!-- 地区选择组件 -->
		<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion"
			:class="allRegion=='省、市、区'?'col-999':''" class="text-df flex-sub  text-1 margin-left-sm hidden">
			{{allRegion}}
		</pick-regions>
		<!-- 图片和视频轮播 -->
		<swiper class="screen-swiper" :class="true?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
		<!-- 单图片轮播 -->
		<swiper class="screen-swiper" :class="true?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 中部弹窗 -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">Modal标题</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					Modal 内容。
				</view>
			</view>
		</view>
		<!-- 底部弹窗 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green">确定</view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding-xl">
					Modal 内容。
				</view>
			</view>
		</view>
		<!-- 倒计时 -->
		<view class="text-green" @tap="getCode">
			{{codeNun==60?'发送验证码':codeNun+'s'}}
		</view>
		<!-- 按钮弹窗 -->
		<btn-modal :show="false" :list="['a','b']" @btnModalTab="btnModalTab"></btn-modal>
		<!-- 年月日时分选择框 -->
		<pick-dateTime :modalShow="false" :getDayNum="0" @dateTimeTap="dateTimeTap">
		</pick-dateTime>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="util.lookImg(item)">
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg(index)">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import amapFile from '@/common/amap-wx.js' //地图绘制路线及计算位置
	export default {
		data() {
			return {
				defaultRegionCode: '110101',
				allRegion: '省、市、区',
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}],
				modalName: '',
				btnModalList: [],
				boxHeight: '',
				codeNun: 60,
				imgList: []
			}
		},
		methods: {
			// 地区选择回调
			handleGetRegion(region) {
				console.log(region)
				this.allRegion = region[0].name + '/' + region[1].name + '/' + region[2].name;
			},
			// 按钮组件选择回调 -1:取消
			btnModalTab(e) {
				console.log(e)
			},
			// 计算滑动区域高度
			box() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#box').boundingClientRect(data => {
					this.boxHeight = this.screenHeight - data.top;
				}).exec();
			},
			// 验证码倒计时
			timer() {
				let _this = this;
				let type = 1;
				setInterval(function() {
					if (_this.codeNun == 0) {
						_this.codeNun = 60;
						type = 0;
					} else if (type == 1) {
						_this.codeNun--;
					}
				}, 1000)
			},
			DelImg(e) {
				this.imgList.splice(e, index);
			},
			ChooseImage() {
				this.util.addImg(9 - this.imgList.length).then(res => {
					this.imgList = this.imgList.concat(res);
				})
			},




			/* 绘制地图路线图(腾讯)
			origin：开始经纬度 longitude+,+longitude
			destination：结束经纬度 longitude+,+longitude
			 color：十六进制色值
			 */
			lineData(origin, destination, color) {
				var myAmapFun = new amapFile.AMapWX({
					key: '4212e2ed80856520bc1a2e44153333fc'
				});
				let that = this
				myAmapFun.getDrivingRoute({
					origin,
					destination,
					success(data) {
						console.log(data)
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							var points = [];
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						//赋值地图路线polyline功能
						that.polyline.push({
							points: points,
							color,
							width: 10,
							arrowLine: true,
						})
					},
					fail(info) {
						console.log(info);
					}
				});
			},
			// 计算两个经纬度间的距离(腾讯)
			getLine(origin, destination) {
				var that = this;
				var key = 'bb6f4ed802756f963b37c184ce4e9766';
				var myAmapFun = new amapFile.AMapWX({
					key: key
				});
				myAmapFun.getDrivingRoute({
					origin,
					destination,
					success(data) {
						that.gap = data.paths[0].distance / 1000;
					},
				});
			},
		}
	}
</script>

<style>
	/* 轮播图高度控制 */
	.screen-swiper {
		min-height: 200upx;
	}
</style>
